<template>
  <div class="all">
    <div class="header">
      <span class="x" @click="bk">×</span>
    </div>
    <h1>注册</h1>
    <span class="title">经纪人不会看到您的手机号</span>
    <br />
    <input
      class="user"
      type="text"
      placeholder="请输入手机号"
      v-model="mobile"
      v-mobile
    />
    <br />
    <input class="user" type="text" placeholder="请输入密码" />
    <br />
    <input class="user" type="text" placeholder="请输入验证码" />
    <button class="log" @click="register">注册</button>
    <p class="try">账号密码登录</p>
    <br />
    <label
      ><p>
        <input type="checkbox" class="agree" />我已阅读并同意<a href="#"
          >《贝壳隐私政策》</a
        >及<a href="#">《贝壳用户使用协议》</a>
      </p></label
    >
  </div>
</template>


<script>
import Vue from "vue";
import { Toast, Icon } from "vant";

Vue.use(Toast).use(Icon);

let phone = false;
export default {
  mounted() {
    var OIpt = document.querySelector(".agree");
    console.log(OIpt);
    let check = OIpt.checked
    console.log(check)
  },
  data() {
    return {
      mobile: "",
      phone: false,
      
    };
  },
  directives: {
    mobile: {
      componentUpdated(el) {
        let mobile = el.value;
        if (/^1[3-9]\d{9}$/.test(mobile)) {
          phone = true;
        } else {
          phone = false;
        }
      },
    },
  },
  methods: {
    bk() {
      console.log("bk");
    },
    register() {
      console.log(phone);
      console.log(check);

      if (phone) {
        console.log("register");
      } else {
        Toast({
          message: "手机号码不合法",
          icon: "warning-o",
        });
      }
      // if (!OIpt.checked) {
      //   Toast({
      //     message: "请同意注册协议",
      //     icon: "warning-o",
      //   });
      // }
    },
  },
};
</script>

<style lang='stylus' scoped>
.all {
  width: 100%;
  height: 100%;
  padding: 0.1rem 0.2rem;
}

.header {
  display: flex;
  justify-content: space-between;
}

.x {
  font-size: 0.35rem;
  color: #aaa;
}

h1 {
  font-size: 0.28rem;
  margin-top: 0.1rem;
}

.title {
  font-size: 0.16rem;
  color: #999;
}

.user {
  width: 100%;
  border: none;
  outline: none;
  margin-top: 0.3rem;
  height: 0.4rem;
}

.log {
  margin-top: 0.25rem;
  height: 0.45rem;
  width: 100%;
  font-size: 0.18rem;
  color: #fff;
  font-weight: bold;
  background-color: #3072F6;
  border: none;
  border-radius: 0.08rem;
  margin-bottom: 0.25rem;
}

.try {
  text-align: center;
}
</style>